<template>
    <div id="app">
        <v-header></v-header>
        <keep-alive>
            <router-view
                    :hotDrugs="hotDrugs"
                    :drugs="drugs"
                    :searchDrugs="searchDrugs"
                    @refreshDrugs="refreshDrugs"
                    @search="search"
                    @cartAdd="cartAdd"
            ></router-view>
        </keep-alive>
        <shopcart :drugs="selectedDrugs"
                  @emptyCart="emptyCart"
                  ref="shopcart"
        ></shopcart>
    </div>
</template>

<script>
    import header from "@/components/header/header";
    import shopcart from "@/components/shopcart/shopcart";
    import Vue from "vue";

    export default {
        data() {
            return {
                hotDrugs: [],
                drugs: {},
                searchDrugs:[]
            }
        },
        components: {
            shopcart,
            'v-header': header
        },
        created() {
            this.$http.get('/api/hotDrugs').then((response) => {
                response = response.body;
                this.hotDrugs = response.data;
            });
        },
        computed: {
            selectedDrugs() {
                let drugList = [];
                for (let i in this.drugs) {
                    for (let j in this.drugs[i]) {
                        this.drugs[i][j].forEach((drug) => {
                            if (drug.count && drug.count !== 0) {
                                drugList.push(drug);
                            }
                        })
                    }
                }
                this.hotDrugs.forEach((drug) => {
                    if (drug.count && drug.count !== 0) {
                        drugList.push(drug);
                    }
                });
                this.searchDrugs.forEach((drug) => {
                    if (drug.count && drug.count !== 0) {
                        drugList.push(drug);
                    }
                });
                return drugList;
            }
        },
        methods: {
            refreshDrugs(currentType, currentPage) {
                // this.drugs = {
                //     "0": {
                //         "0": [{"药名": "123"}, {"药名": "123"}]
                //     },
                //     "1": {
                //         "0": [{"药名": "123"}, {"药名": "123"}]
                //     }
                // };
                if(this.drugs[currentType]!==undefined){
                    if (this.drugs[currentType][currentPage] === undefined) {
                        this.$http.get(`/api/drugs?type=${currentType}&page=${currentPage}`).then((response) => {
                            response = response.body;
                            Vue.set(this.drugs[currentType], currentPage, response.data);
                        });
                    }
                }
            },
            emptyCart() {
                for (let i in this.drugs) {
                    for (let j in this.drugs[i]) {
                        this.drugs[i][j].forEach((drug) => {
                            if (drug.count && drug.count !== 0) {
                                drug.count = 0;
                            }
                        })
                    }
                }
                this.hotDrugs.forEach((drug) => {
                    if (drug.count && drug.count !== 0) {
                        drug.count = 0;
                    }
                });
                this.searchDrugs.forEach((drug) => {
                    if (drug.count && drug.count !== 0) {
                        drug.count = 0;
                    }
                });
            },
            search() {
                this.$http.get(`/api/hotDrugs?drugName=${this.drugName}`).then((response) => {
                    response = response.body;
                    this.searchDrugs = response.data;
                });
            },
            cartAdd(target){
                this.$refs['shopcart'].drop(target)
            }
        }
    }
</script>

<style>
    html, body, li, ul, div, span, p, a {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
        color: white;
    }
</style>
